<template>
  <div>
    Top组件
    <br />
    商品名称：<input type="text" v-model="obj.name" /> 商品价格：<input
      type="number"
      v-model="obj.price"
    />
    <button @click="btn">添加商品</button>

    <table border="1">
      <tr>
        <td>商品序号</td>
        <td>商品名称</td>
        <td>商品价格</td>
        <td>删除商品</td>
      </tr>
      <tr v-for="(item, index) in list" :key="index">
        <td>{{ ++index }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.name }}</td>
        <td>
          <button @click="del(item.index)">删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "HzyTop",

  data() {
    return {
      obj: {
        name: "",
        price: 0,
      },
      list: [],
    };
  },

  mounted() {},

  methods: {
    btn() {
      if (this.obj.name == "" || this.obj.price == "") {
        return alert("内容不能为空");
      } else {
        this.list.push({ ...this.obj });
        this.obj = {};
      }
    },
    del(index) {
      //   console.log(666);
      this.list.splice(index, 1);
    },
  },
};
</script>

<style scoped>
</style>